<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String bathPath = request.getContextPath();
	pageContext.setAttribute("bathPath", bathPath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>XXX</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js" ></script>
  <link rel="stylesheet" href="${bathPath}/frame/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style type="text/css"> 
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
     top: 50%;
     transform: translateY(-50%);
}
</style>
<body>

<form id="myform">
 <div class="demoTable" style="margin-top: 15px;margin-left: 20px;">
 <input type="hidden" id="groupID" name="groupID" value="${prowerGroup.groupID}">
</div> 
</form>   
 <!-- <table class="layui-hide"  id="demo"></table> -->
 <div style="margin-left:30px; margin-top:-10px;">
	<table class="layui-hide"  id="test1"  lay-filter="test1">
	</table>
</div>
           
<script src="${bathPath}/frame/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
    <span class="layui-btn layui-btn-sm" lay-event="quanxuan">全选</span>
    <span class="layui-btn layui-btn-sm" lay-event="quanqing">全清</span>
    <span class="layui-btn layui-btn-sm" lay-event="save">确定</span>
	<span class="layui-btn layui-btn-sm" lay-event="quxiao">取消</span>
  </div>
</script>
<script type="text/html" id="checkboxTpl">
  <input type="checkbox" name="checkAll" lay-skin="primary" lay-filter="check" lay-from="">
</script>
<script>
var ckData = new Array();
var ckData1 = new Array();//存放全部userid的值
Array.prototype.indexOf = function (val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) return i;
    }
    return -1;
};

Array.prototype.remove = function (val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};

var test1Table = new Array();

//表格事件
layui.use([ 'table','layer', 'jquery', 'form'], function(){
	$ = layui.jquery;
	var table = layui.table;
	var form = layui.form ,layer = layui.layer;
  var layTableId="test1";
  var flag=0; //判断表格是否在增加数据
//返回data数据给表格
 var laydata="";
//用于tab面板的js代码
 layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
    tabAdd: function(){
      //新增一个Tab项
      element.tabAdd('demo', {
        title: '新选项'+ (Math.random()*1000|0) //用于演示
        ,content: '内容'+ (Math.random()*1000|0)
        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
      })
    }
    ,tabDelete: function(othis){
      //删除指定Tab项
      element.tabDelete('demo', '44'); //删除：“商品管理”
      
      
      othis.addClass('layui-btn-disabled');
    }
    ,tabChange: function(){
      //切换到指定Tab项
      element.tabChange('demo', '22'); //切换到：用户管理
    }
  };

  //Hash地址的定位
 var layid = location.hash.replace(/^#test1=/, '');
  element.tabChange('test1', layid);
  
  element.on('tab(test1)', function(elem){
    location.hash = 'test1='+ $(this).attr('lay-id');
  });  
});  


  //监听头工具栏事件
  	table.on('toolbar(test1)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    //var length = table.cache[layTableId].length;   
    switch(obj.event){
      case 'quanxuan':   //全选
    	  $(".layui-unselect.layui-form-checkbox").addClass("layui-form-checked");
          //获取所有的数据
         var all = table.cache.test1;//获取test1所有数据
         //console.log(table);
         for(var i = 0 ; i < all.length ; i++){
        	 if(ckData.indexOf(all[i])<0){    		 
        		 ckData.push(all[i]);
        	 }
         }
         console.log(all.length);
         for(var i = 0 ; i < all.length ; i++){
        	 ckData1[i]=ckData[i].userid;
        	 //console.log(ckData1);
         } 
         console.log(ckData);
         console.log("----------------");
         console.log(ckData1);
      break;
      case 'quanqing':   //全清
    	  $(".layui-unselect.layui-form-checkbox").removeClass("layui-form-checked");
     	 var all = table.cache.test1;
     	 //清除所有数据
     	 for(var i = 0 ; i < all.length ; i++){
         	 ckData.remove(all[i]);
          }
     	 
          console.log(ckData);
      break;
      case 'save':   //保存
    	  console.log(ckData1);
          //alert(ckData);
  		$.ajax({
			 type:"POST",
			 async:false,
			 dataType:"text",
			 //data:param,
			url:"${bathPath}/aDKUserGroup/addUserPGroup.action?groupID="+$("#groupID").val()+"&ckData1="+JSON.stringify(ckData1),
		     success:function(data){
		    	/*  if(data!="SUCCESS"){
						layer.msg(data);
					} */
					layer.confirm("确认成功！", {btn: ['确定'], title: "提示",skin:"my-skin"}, function(){
						parent.layer.close(parent.layer.index);
						parent.location.reload();
					});
		     }
		 });
       
      break;
  case 'quxiao':   //取消
	  //layer.closeAll();
	  //layer.close(layer.index);
	var index1 = parent.layer.getFrameIndex(window.name);  
    parent.layer.close(index1);//关闭当前页 
     break;
  };
  });
  
  	$(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
		  var index = $(this).attr('data-index');
		  //console.log(index);
		  var tableBox = $(this).parents('.layui-table-box');
		 // var all = test1Table;
		//  console.log(all);
		  //console.log(tableBox);
		  
		  //存在固定列
		  if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
		   tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
		  } else {
		   tableDiv = tableBox.find(".layui-table-body.layui-table-main");
		  }
		  //console.log(tableDiv);
		  var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
		  if (checkCell.length>0) {
		   checkCell.click();
		  }
		var all = table.cache.test1;
		
		var all =table.cache.test1;
  	console.log(ckData);
  	var ck = $(".layui-unselect.layui-form-checkbox");
  	console.log(ck);
  	

		
		
		if(index)
		if(ckData.indexOf(all[index])<0){
			ckData.push(all[index]);
		}else{
			ckData.remove(all[index]);
			ckData.remove(all[index+all.lenght]);
		}
		console.log(index);
		 for(var i = 0 ; i <=index ; i++){
        	 ckData1[i]=ckData[i].userid;
        	 console.log(ckData1);
         } 
		//console.log(index);
		console.log(ckData);
		console.log("=====================");
		console.log(ckData1);
	 });
	  
	 $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
	  e.stopPropagation();
	 });
	 
  
//监听排序
  table.on('sort(test1)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  console.log(obj.field); //当前排序的字段名
  console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
  console.log(this); //当前排序的 th 对象
  parm="sort="+obj.field+"&order="+ obj.type;
  alert(parm);
  table.reload('test1', {
    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
    ,data:getdata(parm)
  });
}); 

  //渲染表格
 table.render({
	    elem: '#test1'
	    ,id: "test1"
	   ,url:'${bathPath}/aDKUserInfo/selectAllu.action?groupID='+$("#groupID").val()
	 	//,data:getdata()
	    ,toolbar: '#toolbarDemo' 
	    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
	    ,width:740
	    ,size:'sm'//小表格
	    ,cols: [[
	    	/* {type: 'checkbox', fixed: 'left',align:'center',width:'5%'}
			, */{type: 'numbers',title:'序号', fixed: 'left',align:'center',width:'10%'}
	      	,{field: 'depName',title:'所在部门', fixed: 'left',align:'center',width:'20%'}
	      	,{field: 'userid',title:'人员编号', fixed: 'left',align:'center',width:'20%'}
	      	,{field: 'username',title:'人员名称', fixed: 'left',align:'center',width:'25%'}
	      	,{field: 'flag',title:'选择', fixed: 'left',align:'center',width:'24.9%',templet: '#checkboxTpl', unresize: true}
	    ]]
	    ,page: true //开启分页
	    ,limit:10   //默认十条数据一页
        ,limits:[10,20,30,40,100]  //数据分页条
	  }); 
});
</script>

</body>
</html>